<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义axios请求函数</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>

<body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 DELETE 请求</button>

    <script>
        /*
        1. 函数的返回值为promise, 成功的结果为response, 异常的结果为error
        2. 能处理多种类型的请求: GET/POST/PUT/DELETE
        3. 函数的参数为一个配置对象
          {
  
                url: '',  // 请求地址
  
                method: '',  // 请求方式GET/POST/PUT/DELETE
  
                params: {},  // GET/DELETE请求的query参数
  
                data: {}, // POST或PUT请求的请求体参数 
  
          }
        4. 响应json数据自动解析为js对象
        */
        function axios({ url, method = "GET", params = {}, data = {} }) {
            return new Promise((resolve, reject) => {
                const queryStr = Qs.stringify(params)

                if (queryStr) {
                    url += '?' + queryStr
                }

                method = method.toUpperCase()

                // 创建xhr对象
                const xhr = new XMLHttpRequest()
                // 设置请求信息
                xhr.open(method, url)

                // 绑定监听
                xhr.onreadystatechange = () => {
                    // 请求完成
                    if (xhr.readyState === 4) {
                        const status = xhr.status
                        // 请求成功
                        if (status>=200 && status<=299) {
                            // 创建response对象
                            const response = {
                                data: JSON.parse(xhr.responseText),
                                status,
                                statusText: xhr.statusText
                            }
                            // 指定为成功的value
    
                        }
                    }
                }




            })


        }



    </script>


</body>

</html>